<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';

defineOptions({
  name: 'Register'
});

const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useNaiveForm();

interface FormModel {
  account: string;
  code: string;
  password: string;
  confirmPassword: string;
}

const model: FormModel = reactive({
  account: '',
  code: '',
  password: '',
  confirmPassword: ''
});

// 添加倒计时相关状态
const countdown = ref(0);
const countdownTimer = ref<number>();
const loading = ref(false);

const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
  const { formRules, createConfirmPwdRule } = useFormRules();

  return {
    account: [...formRules.userName, ...formRules.email, ...formRules.phone],
    code: formRules.verificationCode,
    password: formRules.pwd,
    confirmPassword: createConfirmPwdRule(model.password)
  };
});

function handleSendCode() {
  if (countdown.value > 0 || !model.account) return;

  loading.value = true;

  // 模拟发送验证码
  setTimeout(() => {
    countdown.value = 60;
    countdownTimer.value = window.setInterval(() => {
      countdown.value = Math.max(0, countdown.value - 1);
      if (countdown.value <= 0) {
        window.clearInterval(countdownTimer.value);
      }
    }, 1000);
    loading.value = false;
  }, 1000);
}

async function handleSubmit() {
  await validate();
  // 实现注册逻辑
  window.$message?.success($t('page.login.common.registerSuccess'));
}
</script>

<template>
  <div class="overflow-hidden rounded-lg bg-white shadow-2xl lg:w-460px dark:bg-gray-800 dark:shadow-gray-900/30">
    <div class="p-4 lg:p-8">
      <div class="mb-4 text-center lg:mb-6">
        <h2 class="text-xl text-gray-900 font-bold lg:text-2xl dark:text-white">
          {{ $t('page.login.register.title') }}
        </h2>
        <p class="mt-1 text-sm text-gray-600 lg:mt-2 dark:text-gray-400">
          {{ $t('page.login.register.subtitle') }}
        </p>
      </div>
      <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
        <NFormItem path="account">
          <NInput v-model:value="model.account" :placeholder="$t('page.login.common.accountPlaceholder')" />
        </NFormItem>
        <NFormItem path="code">
          <div class="w-full flex-y-center gap-16px">
            <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
            <NButton size="large" :disabled="countdown > 0" :loading="loading" @click="handleSendCode">
              {{ countdown > 0 ? `${countdown}s` : $t('page.login.common.getCode') }}
            </NButton>
          </div>
        </NFormItem>
        <NFormItem path="password">
          <NInput
            v-model:value="model.password"
            type="password"
            show-password-on="click"
            :placeholder="$t('page.login.common.passwordPlaceholder')"
          />
        </NFormItem>
        <NFormItem path="confirmPassword">
          <NInput
            v-model:value="model.confirmPassword"
            type="password"
            show-password-on="click"
            :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
          />
        </NFormItem>
        <NSpace vertical :size="18" class="w-full">
          <NButton type="primary" size="large" round block @click="handleSubmit">
            {{ $t('common.confirm') }}
          </NButton>
          <NButton size="large" round block @click="toggleLoginModule('pwd-login')">
            {{ $t('page.login.register.back') }}
          </NButton>
        </NSpace>
      </NForm>
    </div>
  </div>
</template>

<style scoped></style>
